import React from 'react'
import { changeNav } from '../../actions'
import { connect } from 'react-redux'
import { List,SearchBar,Button ,Pagination,WhiteSpace,WingBlank,Icon} from 'antd-mobile'
import hhistory from '../../history'
import { ajaxGet,ajaxPost } from '../../common/jsajaxservice.js'
import NullList from './../../components/nullList.js'

const Item = List.Item
const Brief = Item.Brief

class StuffManage extends React.Component {
    constructor( props ){
        super( props )
        this.state = {
           	stuffList:[],
			total:0,
           	totalNum : 0,
            crtpage:0
        }
    }
	componentDidMount(){
	    this.props.tochangeNav({title:"员工管理",rbtn:[
			<Button key="1" type="primary" inline size="small"
				onClick={ ()=>{ hhistory.push('newStuff') } }
			>新增</Button>
		]})
        this.getStuffList();
	}
	searchStuffList(v) {
		console.log(v)
        var data = {
            page:1,
            limit:5,
			fullname:v
        }
        var that = this
        ajaxPost('sys/user/list',data).then(res => {
            that.setState({
                stuffList:res.data.detail,
                total:res.data.total,
                totalNum:res.data.totalNum
            })
        })
	}
	getStuffList(e = 1) {
		var data = {
			page:e,
			limit:5
		}
		var that = this
        ajaxPost('sys/user/list',data).then(res => {
            that.setState({
                stuffList:res.data.detail,
				total:res.data.total,
				totalNum:res.data.totalNum
			})
		})
	}
    pageChange(e){
        this.setState({
            crtpage:e
        })
        this.getStuffList(e+1);
	}
	render(){
		return(
			<div className='stuffMange'>
			<SearchBar onChange={ val => {
				this.searchStuffList(val)
			}} placeholder="搜索" />
				<List>
					{this.state.stuffList.length>0?
						this.state.stuffList.map((val,index) => {
							return(
								<Item
									key={index}
									onClick={() => {
										let data = JSON.stringify(val)
                                        sessionStorage.setItem('stuff',data)
                                        hhistory.push('newStuff')
									}}
									arrow="horizontal"
									thumb={<img src={val.photo?val.photo:"https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png"} style={{width:'0.8rem',height:'0.8rem',margin:'0.2rem'}} alt=""/>}
								>
									{val.fullname +'\n\n\n\n'+ val.mobile }
								</Item>
							)
						}):<NullList imgsrc={require('./icon_wo_wuyuangong.png')} text1='暂时没有待办项'></NullList>
					}
					<WhiteSpace size="lg" />
					<WingBlank size="md">
						<Pagination total={this.state.total}
									current={this.state.crtpage}
									locale={{
                                        prevText: (<span style={{ display:"flex",alignItems:"center" }}><Icon type="left" />上一页</span>),
                                        nextText: (<span style={{ display:"flex",alignItems:"center" }}>下一页<Icon type="right" /></span>),
                                    }}
									onChange={ this.pageChange.bind(this) }
						/>
					</WingBlank>
					<WhiteSpace size="lg" />
				</List>
			</div>
		)
	}

}

const mapStateToProps = ( state ) => ({
	  
})

const mapDispatchToProps = (dispatch) => ({
	tochangeNav:navobj => dispatch( changeNav( navobj ) )
})

export default connect( mapStateToProps,mapDispatchToProps )( StuffManage )